export default {
  name: 'MenuItem',
  props: {
    menu: { type: Object, default: () => ({}) },
    renderIcon: { type: Function }
  },
  render(h: any) {
    const menu = this.menu
    if (!menu.children) {
      return h('el-menu-item', {
        props: { index: menu.path },
        nativeOn: { click: () => this.$emit('click', menu) },
        scopedSlots: {
          title: () => [this.renderIcon?.(menu), h('span', { class: 'ml-[10px] menu-title' }, menu.title)]
        }
      })
    }

    return h('el-submenu', { props: { index: menu.path } }, [
      h('div', { slot: 'title', class: 'flex items-center' }, [
        this.renderIcon?.(menu),
        h('span', { class: 'ml-[10px] menu-title' }, menu.title)
      ]),
      ...(menu.children || [])?.map((mm: Record<string, any>) =>
        h('menu-item', {
          on: { click: (_mm: any) => this.$emit('click', _mm) },
          props: { menu: mm, renderIcon: (_mm: any) => this.renderIcon(_mm) },
          key: mm.path
        })
      )
    ])
  }
}
